<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{ background: #111; }

        .fire{ width:10px; height:10px; position: fixed; bottom:0; background: red;}

        .small_fire{ width:10px; height:10px; background: green; border-radius: 50%; position: fixed;}
    </style>
</head>
<body>

</body>
<script src="../move.js"></script>
<script>
    
    // 分析：烟花
    // 1. 先创建主体烟花元素，设置基本样式（位置，背景），插入到页面
    // 2. 开始运动，到目标位置，之后删除自身。
    
    // 3. 创建多个小烟花元素，设置多个小烟花元素的基本样式（位置，背景），插入页面
    // 4. 开始运动，到随机目标，之后删除自身。


    // 设计：
    // function Fire(ops){
    //     // 参数的解析
    //     this.ops = ops;
    //     // 创建元素
    //     this.createEle();
    // }
    // Fire.prototype.createEle = function(){
    //     // 创建元素，设置样式，插入页面

    //     // 开始运动
    //     this.action();
    // }
    // Fire.prototype.action = function(){
    //     // move(  )
    // }

    // function SmallFire(ops){
    //     // 参数的解析
    //     this.x = ops.x;
    //     this.y = ops.y;
    //     // 创建元素
    //     this.createEle();
    // }
    // SmallFire.prototype.createEle = function(){
    //     // 创建元素，设置样式，插入页面

    //     // 开始运动
    //     this.action();
    // }
    // SmallFire.prototype.action = function(){
    //     // move(  )
    // }


    // // 触发烟花
    // new Fire({
    //     x:300,
    //     y:400
    // });


    // setInterval(function(){
    //     new Fire();
    // }, 1000)

    // document.onclick = function(){
    //     new Fire();
    // }
    

    // 编程：
    function Fire(ops){
        // 参数的解析
        this.ops = ops;
        // 创建元素
        this.createEle();
    }
    Fire.prototype.createEle = function(){
        // 创建元素，设置样式，插入页面
        this.ele = document.createElement("div");
        this.ele.className = "fire";
        this.ele.style.background = randomColor();
        this.ele.style.left = this.ops.x + "px";
        document.body.appendChild(this.ele);
        // 开始运动
        this.action();
    }
    Fire.prototype.action = function(){
        move( this.ele, {top: this.ops.y}, ()=>{
            // 运动结束，删除元素
            this.ele.remove();
            // 创建多个小烟花
            for(let i=0;i<10;i++){
                new SmallFire(this.ops);
            }
        } )
    }

    function SmallFire(ops){
        // 参数的解析
        this.ops = ops;
        // 创建元素
        this.createEle();
    }
    SmallFire.prototype.createEle = function(){
        // 创建元素，设置样式，插入页面
        this.ele = document.createElement("div");
        this.ele.className = "small_fire";
        this.ele.style.background = randomColor();
        this.ele.style.left = this.ops.x + "px"
        this.ele.style.top = this.ops.y + "px"
        document.body.appendChild(this.ele);

        // 开始运动
        this.action();
    }
    SmallFire.prototype.action = function(){
        // 小烟花运动到随机目标
        move( this.ele, {
            left:random(0, document.documentElement.clientWidth-10),
            top:random(0, document.documentElement.clientHeight-10)
        }, function(){
            // 运动结束，删除元素
            this.ele.remove();
        }.bind(this) )
    }


    // 触发烟花
    // 自动触发
    // setInterval(()=>{
    //     new Fire({
    //         x:random(0, document.documentElement.clientWidth),
    //         y:random(0, document.documentElement.clientHeight)
    //     });
    // },1000)

    // 手动触发
    document.onclick = function(eve){
        new Fire({
            x:eve.clientX,
            y:eve.clientY
        });
    }

    function random(max,min){
        return Math.round(Math.random()*(max-min)+min)
    }
    function randomColor(){
        return `rgb(${random(0,255)},${random(0,255)},${random(0,255)})`
    }

</script>
</html>